Hello TailwindCSS/WindiCSS |
您所在的位置：网站首页 › icon 电动 › Hello TailwindCSS/WindiCSS |
Hello TailwindCSS/WindiCSS
|
前言
随着项目越来越大，你是不是觉得项目的 CSS 越来越难维护，常用的属性就是那么几个，来来回回的写，搞得你也很烦，如果是那么赶紧尝试用 ACSS 方案来解决你的问题吧，如果否，那说明你经历的项目还不够多不够大，这时候你要继续努力搬砖。 如果你不了解什么是 ACSS 的话，可以参考下我之前的教程: CSS 架构之 ACSS 。如果你想了解项目组织样式的演进历史，强烈建议你研读 TailwindCSS 作者 2017 年写的把 CSS 分为五个阶段的一篇文章： 英文版 CSS Utility Classes and "Separation of Concerns" 中文版：CSS功能类与关注点分离读完你会彻底理解「为什么传统的 “语义化类名” 是 CSS 难以维护的原因」，详述了 CSS 的五个阶段，写的很棒，多看几遍。 回到 ACSS，ACSS 中目前最流行的框架就是我们文章的主角 TailwindCSS。
它们是一种继承关系，如何 TailwindCSS 是父类，那么 Windi CSS 就是子类。 当然你也可以认为 TailwindCSS 是 ES5，Windi CSS 是 JavaScript ，Windi CSS 在 TailwindCSS 的基础上进行了扩展，还包括 ES6+ 的部分，这个我们留在 TailwindCSS 章节讲。 不过，你可以放心学习 TailwindCSS，它的语法在 Windi CSS，完全是可用的。 搭建一个环境Windi CSS 如何安装结合其他框架使用，在 安装 章节非常清楚。 而且我们也没必要纠结 WIndiCSS 的大家过程，这些框架都会帮我们处理的，这里我们简单的搭建一个项目，方便接下里的演示： ➜ mkdir WindiCSS-study && cd WindiCSS-study ➜ WindiCSS-study npm init -y ➜ WindiCSS-study npm install windicss -D在 package.json 文件中的 script 字段，我们新增如下字段： "scripts": { "windicss:help": "windicss --help", "windicss:init": "windicss --init . --compile", "windicss:build": "windicss ./index.html -to windi-acss.css" },接下来可以运行命令： npm run windicss:init项目根目录将会新增三个文件： ├── index.html ├── index.windi.html ├── package.json └── windi.css查看 index.html 的文件内容大致如下： WindiCSS-study 24 Sept 1:30 PM Organiser : IHC Hello WindiCSS A-142/1, A-142, Ganesh Nagar, Tilak Nagar, New Delhi, 110018 GoingHTML 层面全部都是 ACSS 的写法，同时注意文件开头应用的样式： 我们对其重新命名：windi.css => windi-acss.css。 现在我们运行命令： # "windicss ./index.html -to windi-acss.css" # 使用 -o 参数指定生成 css 文件的名称， -t 参数指定是否添加预检样式 (基本样式)。 npm run windicss:build这个命令会根据 HTML 的类名生成对应的 CSS，这是项目的目录结构为： . ├── index.html ├── index.windi.html ├── package.json ├── windi-acss.css └── windi.css多了个文件 windi-acss.css 其内容为： *, ::before, ::after { -webkit-box-sizing: border-box; box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; } * { --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(59, 130, 246, 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; } :root { -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; } :-moz-focusring { outline: 1px dotted ButtonText; } :-moz-ui-invalid { box-shadow: none; } ::moz-focus-inner { border-style: none; padding: 0; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } [type='search'] { -webkit-appearance: textfield; outline-offset: -2px; } abbr[title] { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } body { margin: 0; font-family: inherit; line-height: inherit; } html { -webkit-text-size-adjust: 100%; font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; line-height: 1.5; } .container { width: 100%; } @media (min-width: 640px) { .container { max-width: 640px; } } @media (min-width: 768px) { .container { max-width: 768px; } } @media (min-width: 1024px) { .container { max-width: 1024px; } } @media (min-width: 1280px) { .container { max-width: 1280px; } } @media (min-width: 1536px) { .container { max-width: 1536px; } } .bg-gray-100 { --tw-bg-opacity: 1; background-color: rgba(243, 244, 246, var(--tw-bg-opacity)); } .bg-blue-500 { --tw-bg-opacity: 1; background-color: rgba(59, 130, 246, var(--tw-bg-opacity)); } .bg-white { --tw-bg-opacity: 1; background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); } .hover\:bg-gray-200:hover { --tw-bg-opacity: 1; background-color: rgba(229, 231, 235, var(--tw-bg-opacity)); } .rounded-lg { border-radius: 0.5rem; } .rounded-t-lg { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } .cursor-pointer { cursor: pointer; } .flex { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; } .flex-col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .items-center { -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .justify-center { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .font-bold { font-weight: 700; } .font-normal { font-weight: 400; } .font-light { font-weight: 300; } .h-screen { height: 100vh; } .h-full { height: 100%; } .text-8xl { font-size: 6rem; line-height: 1; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .leading-loose { line-height: 2; } .mx-auto { margin-left: auto; margin-right: auto; } .mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; } .py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .pt-4 { padding-top: 1rem; } .pb-1 { padding-bottom: 0.25rem; } .pt-1 { padding-top: 0.25rem; } .shadow { --tw-shadow-color: 0, 0, 0; --tw-shadow: 0 1px 3px 0 rgba(var(--tw-shadow-color), 0.1), 0 1px 2px 0 rgba(var(--tw-shadow-color), 0.06); -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .text-center { text-align: center; } .text-white { --tw-text-opacity: 1; color: rgba(255, 255, 255, var(--tw-text-opacity)); } .text-gray-700 { --tw-text-opacity: 1; color: rgba(55, 65, 81, var(--tw-text-opacity)); } .text-gray-800 { --tw-text-opacity: 1; color: rgba(31, 41, 55, var(--tw-text-opacity)); } .text-gray-600 { --tw-text-opacity: 1; color: rgba(75, 85, 99, var(--tw-text-opacity)); } .tracking-wide { letter-spacing: 0.025em; } .tracking-wider { letter-spacing: 0.05em; } .w-full { width: 100%; } @media (min-width: 1024px) { .lg\:rounded-l-lg { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; } .lg\:rounded-tr-none { border-top-right-radius: 0px; } .lg\:flex { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .lg\:justify-start { -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } .lg\:justify-end { -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .lg\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .lg\:text-2xl { font-size: 1.5rem; line-height: 2rem; } .lg\:px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .lg\:py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .lg\:px-0 { padding-left: 0px; padding-right: 0px; } .lg\:pt-0 { padding-top: 0px; } .lg\:text-left { text-align: left; } .lg\:w-4\/12 { width: 33.333333%; } .lg\:w-1\/3 { width: 33.333333%; } }现在可以在浏览器打开 index.html 文件了，看到效果是下面这样： 为了更好的演示和提升开发体验，我们需要对项目进行一些调整。 首先，就是增加热更新： "scripts": { "windicss:help": "windicss --help", "windicss:init": "windicss --init . --compile", "windicss:build": "windicss ./src/index.html -mto ./src/windi-minify.css", "windicss:watch": "windicss ./src/index.html -dto ./src/windi-acss.css" },windicss:watch 命令添加了 -d 参数，开启开发环境下的热更新功能。 目录调整为如下结构： . ├── package.json └── src ├── index.html └── windi-acss.cssindex.html 的内容替换为： WindiCSS-study Hello WindiCSS!npm run windicss:watch 之后，打开浏览器看到： |
【本文地址】
今日新闻 |
推荐新闻 |